<template>
    <view class="box bg">
        <view class="boxson">
            <!-- 头部区域 -->
            <image class="image" mode="heightFix" src="../../static/img/dingdan-titlle-list@3x.png"></image>
            <text>挂起</text><text style="margin-left: 40rpx;">{{data.add_time | formatDate}}</text>
            <hr class="hr" />
            <!-- 展示内容区域 -->
            <view class="main">
                <!-- <button class="call" @click="toTel(data.mobile)">拨打</button> -->
                <p style="display: flex;align-items: center;">
                    <text style="display: inline-block;width: 40%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">用户: {{data.nickname?data.nickname:data.username}}</text>
                    &nbsp;&nbsp;&nbsp; 手机: {{data.mobile}}
                </p>
                <!-- <p v-for="(item, index) in data.wp">订单物品: {{item.wp_name}} &nbsp;&nbsp;&nbsp; 重量: {{item.weight}}</p> -->
                <view style="display: flex;margin-top: 20rpx;">
                    <view>订单物品：</view>
                    <view style="flex: 1;">
                        <view v-for="(i, idx) in data.wp" :key="idx" style="display: flex;flex-wrap: wrap;">
                            <text>{{idx+1}}、</text>
                            <text style="margin-right: 30rpx;">名称: {{i.wp_name || '待定'}}</text>
                            <text style="margin-right: 30rpx;">{{i.unit == 0 ? "重量:" : "数量:"}}{{i.nums > 0 ? (i.nums+i.weight) : i.weight}}</text>
                            <text>价格: {{i.total_price > 0 ?  i.total_price+'元' : '待确认'}}</text>
                        </view>
                    </view>
                </view>
                <!-- <p style="text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width: 80%;;">地址: {{data.location_address+data.recycling_address}}</p> -->
                <!-- <p>备注: {{data.remsck}}</p> -->
                <!-- <image @click="toMapNav(data)" class="img" src="../../../../static/img/myhome/icon-dingwei@3x.png"></image> -->
            </view>
            <hr class="hr" />
            <!-- 按钮区域 -->
            <view class="button" v-if="!user_id">
                <view style="display: flex;justify-content: flex-end;">
                    <view style="display: flex;align-items: center;">
                        <text class="datasum">总价: {{data.price}}元</text>
                        <button class="editsetbutton" @click="Edit_order(data)">继续编辑</button>
                    </view>
                </view>
            </view>
            <!-- 按钮区域 end -->
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            data: Object,
			user_id:0
        },
        data() {
            return {
                isShow: true
            }
        },
        methods: {
            toTel(phoneNumber) {
                if(this.$u.test.isEmpty(phoneNumber)) {
                    uni.showToast({
                        title: '电话为空',
                        duration: 1000,
                        icon: 'none',
                    });
                    return ;
                }
                uni.makePhoneCall({
                    phoneNumber: phoneNumber,
                });
            },
            // 编辑订单跳转
            Edit_order(data) {
                //console.log(data)
                uni.navigateTo({
                    url: 'scanOrder?hang=1&data=' + JSON.stringify(data)
                })
            },
            // 标记完成
            colseShow(data) {
                if(data.price <= 0) {
                    uni.showToast({
                        title: '请先完成订单',
                        duration: 1000,
                        icon: 'none'
                    });
                    return ;
                }
                this.$emit('closeS',data)
            },
            // 跳转至地图导航
            toMapNav(data) {
                const latitude = Number(data.latitude);
                const longitude = Number(data.longitude);
                uni.openLocation({
                    latitude: latitude,
                    longitude: longitude,
                    success: function (res) {},
                    fail: (err) => {}
                });
                // uni.navigateTo({
                //     url: '../Home/address/NavigationMap?data='+ JSON.stringify(data)
                // })
            },
            _postReceiving(id) {
                this.$u.api.postReceiving({
                    id: id,
                }).then(res => {
                    uni.showToast({
                        title: '接单成功',
                        duration: 1000
                    });
                    this.$emit('_getRecoverList');
                }).catch(err =>{
                    uni.showToast({
                        title: '接单失败',
                        duration: 1000,
                        icon: 'none'
                    });
                })
            },
        },
        //20221202
        filters: {
            formatDate: function(unixTime){
                var separator = "-";
                var timeTmp = new Date(unixTime * 1000); 
                var displayTime = timeTmp.getFullYear() + separator + (timeTmp.getMonth() + 1) + separator + timeTmp.getDate();
                
                //displayTime += separator + timeTmp.getHours() + separator;
                //displayTime += timeTmp.getMinutes() + separator;
                //displayTime += timeTmp.getSeconds();
                
                return displayTime;
            }
        }
    }
</script>

<style lang="scss" scoped>
    /* 标记完成背景 */
    .shodo {
        position: absolute;
        top: 0;
        left: 0;
        width: 750rpx;
        // height: 100vh;
        /* background-color: #EEEEEE; */
    }

    .box {
        position: relative;
        margin: 0 30rpx 30rpx 30rpx;
        width: 690rpx;
        // height: 410rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
    }

    .boxson {
        padding: 30rpx;
        font-size: 24rpx;
        color: #888888;
    }

    .hr {
        margin: 18rpx 0;
        height: 1rpx;
        background-color: #efeff0;
    }

    .main {
        position: relative;

        .img {
            width: 50px;
            height: 50px;
            position: absolute;
            bottom: 0;
            right: 0;
        }
    }

    .image {
        position: relative;
        top: 5rpx;
        left: 0rpx;
        width: 26rpx;
        height: 32rpx;
    }

    .down {
        width: 50rpx;
        height: 50rpx;
    }

    .call {
        position: absolute;
        right: 40rpx;
        height: 40rpx;
        background-color: #defbef;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #1bc078;
        line-height: 40rpx;
    }

    .setbutton {
        // position: absolute;
        // right: 30rpx;
        width: 163rpx;
        height: 60rpx;
        background-color: #ff4200;
        border-radius: 30rpx;
        line-height: 60rpx;
        color: #FFFFFF;
        font-size: 24rpx;
        margin: unset;
    }

    .editsetbutton {
        // position: absolute;
        // right: 200rpx;
        min-width: 163rpx;
        height: 60rpx;
        background-color: #ffffff;
        border-radius: 30rpx;
        border: solid 2rpx #0babe0;
        font-size: 24rpx;
        line-height: 60rpx;
        color: #0babe0;
    }

    .oksetbutton {
        // position: absolute;
        // right: 30rpx;
        min-width: 163rpx;
        height: 60rpx;
        background-color: #0babe0;
        border-radius: 30rpx;
        font-size: 24rpx;
        line-height: 60rpx;
        letter-spacing: 0rpx;
        color: #ffffff;
        margin-left: 30rpx;
    }

    p {
        margin-top: 20rpx;
    }

    .textget {
        float: right;
        color: #FF0000;
    }

    .textblue {
        color: #0babe0;
    }

    .texteee {
        color: #888888;
    }

    .datasum {
        // position: absolute;
        // right: 30rpx;
        // top: 0;
        margin-right: 40rpx;
    }

    .button {
        // margin-bottom: 30rpx;
    }
</style>
